<template>
	<view>
		<u-navbar back-icon-color="#fff" title-color="#fff" title="任务详情" :border-bottom="false"></u-navbar>
	  <view class="clockTop">
			<view class="tit">打卡结果</view>
			<view class="node">打卡人数：<text class="yellow">{{info.clockedUsers}}</text><text>/{{info.clockUsers}}</text></view>
		</view>
		<my-empty v-if="emptyFalse" emptyTit="暂无记录"></my-empty>
		<my-user-li v-for="(item,index) in list"  :key="index" :infoName='item.username' :thumbnail='item.avatar'>
		  <template slot="nameBot">
		 	<view class="name_bot_txt">
				<view class="name_line"><text>耗时：{{item.duration}}</text><text>正确率：{{item.rightRank}}</text></view>
			</view>
			</template>
		</my-user-li>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{},
				list:[],
				taskId:'',
				pageNo:1,
				isLastPage: false,
				status: 'loadmore',
				emptyFalse:false
			}
		},
		computed: {
			lastItem() {
				return function(value) {
					if (value) {
						return '耗时：' + value;
					}
				};
			}
		},
		onLoad(opiton){
			this.taskId=opiton.taskId
			this.init()
		},
		methods: {
			init(){
				this.list=[];
				this.pageNo=1;
				this.isLastPage=false;
				this.status = 'loadmore';
				return this.getInfo()
			},
			getInfo(){
				const pageData={
					pageNo:this.pageNo,
					taskId:this.taskId
				}
				this.status = 'loading';
				return new Promise((resolve, reject) => {
					  this.request
						.post('/app/teacher/home/clockDetail',pageData)
						.then(res => {
							this.info=res
					  	this.list=this.list.concat(res.clockUsersList.list)
							this.emptyFalse=this.list.length>0?false:true
							this.isLastPage = res.clockUsersList.isLastPage;
							if (!this.isLastPage) this.pageNo++;
							else this.status = 'nomore';
							resolve();
						})
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.clockTop::after{
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background:#EBEBEB;
		height: 1px;
		z-index: 100;
	}
  .clockTop{
		height: 112upx;
		line-height: 112upx;
		color: #363940;
	  position: relative;
		padding: 0 30upx;
		display: flex;
		justify-content: space-between;
		.tit{
			font-size: 36upx;
			font-weight: 600;
		}
		.node{
			font-size: 28upx;
			color: #787D89;
			text:last-child{
					color: #363940;
			}
		}
	}
	.empty {
		height: 85%;
		top: auto;
		bottom: 0;
	}
	.name_bot_txt{
		display: flex;
		justify-content: start;
		margin-top: 15upx;
		width: 100%;
		.name_line{
			width: 100%;
			display: flex;
			justify-content: start;
			align-items: center;
			color: #A6A6A6;
		}
		text{
			display: block;
			height: 35upx;
			overflow: hidden;
			margin-right: 58upx;
		}
	}
</style>
